/**
 * Renders and allows navigating a grid of photos. Selected photo can
 * be opened and show in detail.
 */
var Grid = (function () {
    "use strict";

    var PHOTO_W = 600;
    var PHOTO_H = 400;
    var SCREEN_W = 960;
    var SCREEN_H = 540;

    var indexgl=-1 ;
    var items = [],
        descriptions = [],
        index = 0,
        rowSize = 2,
        opened = false,
        elem = null,
        overlay = null,
        big = null, // opened image view
        desc = null,
        arrowLeft = null,
        arrowRight = null,
        callbacks = {
            onPhotoOpened: null, // called when selected photo in the gallery is opened
            onPhotoChanged: null // called when image in the photo view was changed
        },
        likeState = []; // if likeState[i] == true means that a photo was marked with "like"

    var xhttp, xmlDoc, x;
    var panel_index = 0, list_index = 1;
    var hien_thi = [];
    var index_max = 0;
    var menu_index = 0;
    var hien_thi_cach_lam = [];
    var hien_thi_nguyen_lieu = [];
    var index_manhinh_huongdan = 0;
    var loaimonan = [];
    var folder_img = "";
    var mo_ta = [];

    
	var internetConnectionInterval = 500; //this is just an example value that repeats the connection check every 500 miliseconds
	//var internetConnectionPopup = document.getElementById("PopupMang");
	var ishow = 0;
	
	
	
	function hienthiketnoi(){
	setInterval(function() {
	    if(!checkConnection()){
            // no internet connection

            if(ishow==0){
            	$('#PopupMang').sfPopup('show');
                    // dừng
                    alert("Mat ket noi");
                    ishow = 1;
            }
    } else {
            // if error message was shown, it should be returned back to normal

            if(ishow==1) {
            	$('#PopupMang').sfPopup('hide');

                    // return to normal screen
                    alert("Da ket noi"); 
                    ishow = 0;
            }
    }
}, internetConnectionInterval);
	}
    function checkConnection() {
	    var physicalConnection = 0, 
	    httpStatus = 0;
	    var networkPlugin, currentInterface;
	    networkPlugin  = document.getElementById("pluginObjectNetwork");
	    currentInterface = networkPlugin.GetActiveType();
	    // Get active connection type - wired or wireless.
	    

	    // If no active connection.
	    if (currentInterface == -1) {
	    	
	            return false;
	    }

	    // Check physical connection of current interface.
	    physicalConnection = networkPlugin.CheckPhysicalConnection(currentInterface);

	    // If not connected or error.
	    if (physicalConnection != 1) {
	    	
            return false;
	    }

	    // Check HTTP transport.
	    httpStatus = networkPlugin.CheckHTTP(currentInterface);

	    // If HTTP is not avaliable.
	    if (httpStatus != 1) {
	    	
            return false;
	    }

	    // Everything went OK.
	    
        return true;
	    
	}
    function log(txt) {
        alert("[PHI THUYEN XANH][GRID] " + txt);
    }
    
    function focus(idx) {
        var i, len;

        idx = typeof idx !== "undefined" ? idx : index;

        if (idx == -999) {
            
                items[0].className = "";
            }
        if (idx >= 0 && idx < items.length) {
            for (i = 0, len = items.length; i < len; i += 1) {
                items[i].className = "";
            }

            items[idx].className = "focused";
            index = parseInt(idx, 10);
            
            document.getElementById('info').innerHTML = "<div>" +hien_thi[idx]+"</div><div>"+mo_ta[index]+"</div>";
        }
    }

    function move(offset) {
        log("MOVE: index = " + index + ", offset = " + offset);

        if (isNaN(offset)) {
            log("Move: offseet is not a number");
            return;
        }
        var max = items.length ? (items.length - 1) : 0,
            newIndex = index + offset;

        focus(newIndex < 0 ? 0 : newIndex > max ? max : newIndex);
        
        
        
        if((newIndex-1 == 5 && offset == 1) || (newIndex == items.length && offset== 1)){
        	alert('Chuyển');
        	document.getElementById('gallery-arrows-left').click();
        	
        	
        }
        else if(newIndex+1 == 0 && offset == -1){
			alert('Chuyển');
			document.getElementById('gallery-arrows-right').click();
		}
        
        
        
        
    }

    function updateClick() {
        log("Update click");
        updateBig();
        updateDesc();
    }
    function addfavorite(loai,ten){
    	var domain = null, monan, loaimon, tenmon;
    	domain = "http://ngoton.com/samsung_app/";
    	if (window.XMLHttpRequest)
	  	  {
	  	  xhttp=new XMLHttpRequest();
	  	  }
    	else
	  	  {
	  	  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  	  }
    	xhttp.open("GET",domain+ "data/favorite.xml",false);
		
		xhttp.send();
		xmlDoc=xhttp.responseXML;
		x=xmlDoc.getElementsByTagName("favorite")[0];
		
		monan = xmlDoc.createElement("monan");
		loaimon = xmlDoc.createElement("loaimon");
		tenmon =  xmlDoc.createElement("tenmon");
		
		loaimon.appendChild(xmlDoc.createTextNode(loai));
		tenmon.appendChild(xmlDoc.createTextNode(ten));
		
		monan.appendChild(loaimon);
		monan.appendChild(tenmon);
		
		 
		x.appendChild(monan);
		
		alert("thanh cong "+ loai + ten);
		alert(x.getElementsByTagName("loaimon")[3].childNodes[0].nodeValue);
		
		
    }
    
    
    function favorite(){
    	var domain = null;
    	domain = "http://ngoton.com/samsung_app/";
    	if (window.XMLHttpRequest)
	  	  {
	  	  xhttp=new XMLHttpRequest();
	  	  }
    	else
	  	  {
	  	  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  	  }
    	xhttp.open("GET",domain+ "data/favorite.xml",false);
		
		xhttp.send();
		xmlDoc=xhttp.responseXML;
		x=xmlDoc.getElementsByTagName("monan");
		var a;
    	var b = "";
    	var newdiv = document.createElement("div");
    	newdiv.className = "container-favorite";
    	var divfavorite = document.getElementById("content_menu");
    		
    	for (var j=0;j<x.length;j++)
      	  { 
      	  
      	  a = x[j].getElementsByTagName("loaimon")[0].childNodes[0].nodeValue;
      	  b += "<div class='div-in-favorite' id='favorite-"+ j+1 + "' >" +x[j].getElementsByTagName("tenmon")[0].childNodes[0].nodeValue+ "</div>";
      	  
      	  
      	  }
    	newdiv.innerHTML = "&nbsp;&nbsp;  <  Trống  >";
    	divfavorite.appendChild(newdiv);
    }
    
    function loadcontentmenu(idx){
    	if(idx==1){
    		document.getElementById("content_menu").innerHTML = "<div class='title-favorite'>Chức năng</div>";
    	}
    	else if(idx==2){
    		document.getElementById("content_menu").innerHTML = "<div class='title-favorite'>Yêu thích</div>";
    		favorite();
    	}
    	if(idx==3){
    		document.getElementById("content_menu").innerHTML = "<div class='title-favorite'>Cài đặt</div>";
    	}
    }
    function helpmenu(id){
    	
    	panel_index = 2;
    	focus(-999);
    	document.getElementById("list_focus").className = "";
    	if(id==0){
    		document.getElementById("close_menu").click();
    		if(opened){panel_index = 4;}
    		else{panel_index = 0;}
    		document.getElementById("go_menu").className = "go_menu";
    		document.getElementById("go_favorite").className = "go_favorite";
    		document.getElementById("go_setting").className = "go_setting";
    		alert("dong menu");
    		document.getElementById("list_focus").className = "setfocus";
    		
    		menu_index = 0;
    		loadcontentmenu(menu_index);
    	}
    	else if(id==1){
    		document.getElementById("go_menu").className = "menu-hover";
    		document.getElementById("go_menu").click();
    		document.getElementById("go_favorite").className = "go_favorite";
    		document.getElementById("go_setting").className = "go_setting";
    		alert("mo menu");
    		menu_index = 1;
    		loadcontentmenu(menu_index);
    	}
    	else if(id==2){
    		document.getElementById("go_favorite").className = "menu-favorite-hover";
    		document.getElementById("go_favorite").click();
    		document.getElementById("go_menu").className = "go_menu";
    		document.getElementById("go_setting").className = "go_setting";
    		alert("mo menu favorite");
    		menu_index = 2;
    		loadcontentmenu(menu_index);
    	}
    	else if(id==3){
    		document.getElementById("go_setting").className = "menu-setting-hover";
    		document.getElementById("go_setting").click();
    		document.getElementById("go_menu").className = "go_menu";
    		document.getElementById("go_favorite").className = "go_favorite";
    		alert("mo menu setting");
    		menu_index = 3;
    		loadcontentmenu(menu_index);
    	}
    	
    }
    function getloaimon(arr){
    	for(var i=0; i<arr.length; i++){
    		loaimonan[i] = arr[i];
    	}
    }
    function shownguyenlieu(arr){
    	for(var i=0; i<arr.length; i++){
    		hien_thi_nguyen_lieu[i] = arr[i];
    	}
    }
    function showcachlam(arr){
    	for(var i=0; i<arr.length; i++){
    		hien_thi_cach_lam[i] = arr[i];
    	}
    }
    
    function showinfo(arr){
    	for(var i=0; i<arr.length; i++){
    		hien_thi[i] = arr[i];
    	}
    }
    function showmota(arr){
    	for(var i=0; i<arr.length; i++){
    		mo_ta[i] = arr[i];
    	}
    }
    function setindex(idx){
    	indexgl = idx;
    	alert("index dag set: "+ indexgl);
    	focus(-999);
    	document.getElementById("list_focus").className = "setfocus";
    }
    
    function list_to_left(){
    	var ele = document.getElementById("gallery");
    	ele.innerHTML = "";
    	var ele2 = document.getElementById("gallery2");
    	ele2.innerHTML = "";
    	
    	document.getElementById("menu_arrowleft").click();
    }
    function list_to_right(){
    	var ele = document.getElementById("gallery");
    	ele.innerHTML = "";
    	var ele2 = document.getElementById("gallery2");
    	ele2.innerHTML = "";
    	
    	document.getElementById("menu_arrowright").click();
    }
    function list(){
    	
    load(list_index);
    
    }
    function load(id){
    	var folder = null;
    	var domain = null;
    	domain = "http://ngoton.com/samsung_app/";
    	var ele = document.getElementById("gallery");
    	ele.innerHTML = "";
    	var ele2 = document.getElementById("gallery2");
    	ele2.innerHTML = "";
    	
    	
    	if (window.XMLHttpRequest)
	  	  {
	  	  xhttp=new XMLHttpRequest();
	  	  }
    	else
	  	  {
	  	  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  	  }
    	
    	if(id==0){
    		xhttp.open("GET",domain+ "data/moncanh.xml",false);
    		folder = "moncanh/";
    	}
    	else if(id==1){
    		xhttp.open("GET",domain+ "data/monxao.xml",false);
    		folder = "monxao/";
    	}
    	else if(id==2){
    		xhttp.open("GET",domain+ "data/monnuong.xml",false);
    		folder = "monnuong/";
    	}
    	else if(id==3){
    		xhttp.open("GET",domain+ "data/monkho.xml",false);
    		folder = "monkho/";
    	}
    	else if(id==4){
    		xhttp.open("GET",domain+ "data/monchien.xml",false);
    		folder = "monchien/";
    	}
    	else if(id==5){
    		xhttp.open("GET",domain+ "data/monlau.xml",false);
    		folder = "monlau/";
    	}
    	else if(id==6){
    		xhttp.open("GET",domain+ "data/monnom.xml",false);
    		folder = "monnom/";
    	}
    	else if(id==7){
    		xhttp.open("GET",domain+ "data/monche.xml",false);
    		folder = "monche/";
    	}
    	else if(id==8){
    		xhttp.open("GET",domain+ "data/mongoi.xml",false);
    		folder = "mongoi/";
    	}
    	else if(id==9){
    		xhttp.open("GET",domain+ "data/monbo.xml",false);
    		folder = "monbo/";
    	}
    	else if(id==10){
    		xhttp.open("GET",domain+ "data/monheo.xml",false);
    		folder = "monheo/";
    	}
    	else if(id==11){
    		xhttp.open("GET",domain+ "data/monga.xml",false);
    		folder = "monga/";
    	}
    	else if(id==12){
    		xhttp.open("GET",domain+ "data/haisan.xml",false);
    		folder = "haisan/";
    	}
    	//..xu li
    	xhttp.send();
    	xmlDoc=xhttp.responseXML;
    	x=xmlDoc.getElementsByTagName("monan");
    	var h = [];
    	var k = [];
    	var l = [];
    	var g = [];
    	var z = [];
    	for (var j=0;j<x.length;j++)
      	  { 
      	  
      	  h.push(x[j].getElementsByTagName("tenmon")[0].childNodes[0].nodeValue);
      	  k.push(x[j].getElementsByTagName("cachlam")[0].childNodes[0].nodeValue);
      	  l.push(x[j].getElementsByTagName("nguyenlieu")[0].childNodes[0].nodeValue);
      	  g.push(x[j].getElementsByTagName("tenloai")[0].childNodes[0].nodeValue);
      	  z.push(x[j].getElementsByTagName("mota")[0].childNodes[0].nodeValue);
      	  }
    	showinfo(h);
    	showcachlam(k);
    	shownguyenlieu(l);
    	getloaimon(g);
    	showmota(z);
    	//..khoi tao
    	 var soluong = x.length;	
         var images = [];

         for (var i = 1; i < soluong+1; i += 1) {
             images.push(folder + "image_0" + i + ".jpg");
         }

         getfolder(folder);
         init("gallery", images);
         
         
    }
    
    function init(id, arr) {
    	
    	if(panel_index==0){
    		document.getElementById("list_focus").className = "setfocus";
         }
         if(panel_index==1){
         	document.getElementById("list_focus").className = "";
         }
    	var ele,ele2;
    	ele = document.getElementById("gallery");
    	ele.innerHTML = "";
    	ele.className = "gallery";
    	ele2 = document.getElementById("gallery2");
    	ele2.innerHTML = "";
    	ele2.style.visibility = "hidden";
    	
    	var  arrowsRight, arrowsLeft, galleryDiv;
		
		//
		galleryDiv = document.getElementById("gallery2");
		arrowsRight = document.getElementById("gallery-arrows-right");
		arrowsLeft = document.getElementById("gallery-arrows-left");
    	
        var frag = document.createDocumentFragment(), i, len,
            item, parent, like, that;

        elem = document.getElementById(id);
        parent = elem.parentElement || document.body;

        that = this;
        
        var domain = "http://ngoton.com/samsung_app/images/";
        

        if (elem && arr && arr.length) {
        	if(arr.length > 6){
        		index_max = arr.length;
        		//call the functions
        		
        		arrowsRight.addEventListener('mouseover', function(){
        			arrowsRight.focus();
        			
            		
            	});
        		arrowsLeft.addEventListener('mouseover', function(){
        			arrowsLeft.focus();
            		
            	});
        		
        		
        		
        		arrowsRight.style.visibility="visible";
        		arrowsLeft.style.visibility="visible";
        		
        		//
        		for (i = 6, len = arr.length; i < len; i += 1) {
                    item = document.createElement("img");
                    item.name = i;
                    item.src = domain + arr[i];
                    
                    frag.appendChild(item);
                    
                    item.addEventListener('mouseover', function(event){
                    	var it = event.target;

                        if (elem === it) {
                            return;
                        }

                        var id = parseInt(it.name, 10);

                        if (isNaN(id)) {
                            return;
                        }

                        that.focus(id);
                		
                	}, false);
                    item.addEventListener('click', function(event) {
                        var it = event.target;

                        if (elem === it) {
                            return;
                        }

                        var id = parseInt(it.name, 10);

                        if (isNaN(id)) {
                            return;
                        }

                        that.focus(id);
                        that.open();
                        that.updateClick();
                    });
                    
                    likeState[i] = false;
                    items[i] = item;
    			}
        		galleryDiv.appendChild(frag);
        		
                
        		
        		
        		
                
                
                
                for (i = 0, len = 6; i < len; i += 1) {
                    item = document.createElement("img");
                    item.name = i;
                    item.src = domain + arr[i];
                    item.addEventListener('mouseover', function(event){
                    	var it = event.target;

                        if (elem === it) {
                            return;
                        }

                        var id = parseInt(it.name, 10);

                        if (isNaN(id)) {
                            return;
                        }

                        that.focus(id);
                		
                	}, false);
                	
                    item.addEventListener('click', function(event) {
                        var it = event.target;

                        if (elem === it) {
                            return;
                        }

                        var id = parseInt(it.name, 10);

                        if (isNaN(id)) {
                            return;
                        }

                        that.focus(id);
                        that.open();
                        that.updateClick();
                    });

                    frag.appendChild(item);

                    likeState[i] = false;
                    items[i] = item;
                }
                elem.appendChild(frag);

                if(panel_index==1){
                	focus();
                
                }
        	}
        	if(arr.length < 6 || arr.length==6){
        		arrowsLeft.style.visibility="hidden";
        		arrowsRight.style.visibility="hidden";
        		for (i = 0, len = arr.length; i < len; i += 1) {
                    item = document.createElement("img");
                    item.name = i;
                    item.src = domain + arr[i];
                    item.addEventListener('mouseover', function(event){
                    	var it = event.target;

                        if (elem === it) {
                            return;
                        }

                        var id = parseInt(it.name, 10);

                        if (isNaN(id)) {
                            return;
                        }

                        that.focus(id);
                		
                	}, false);
                	
                    item.addEventListener('click', function(event) {
                        var it = event.target;

                        if (elem === it) {
                            return;
                        }

                        var id = parseInt(it.name, 10);

                        if (isNaN(id)) {
                            return;
                        }

                        that.focus(id);
                        that.open();
                        that.updateClick();
                    });

                    frag.appendChild(item);

                    likeState[i] = false;
                    items[i] = item;
                }
                elem.appendChild(frag);

                if(panel_index==1){
                	focus();
                	}
        	}
        	
        	
        	document.getElementById("close_menu").addEventListener('click', function() {
        		document.getElementById("popup_menu").style.width = "0";
        		document.getElementById("popup_menu").style.height = "0";
        		
        		document.getElementById("close_menu").style.visibility = "hidden";
        		document.getElementById("popup_menu").style.visibility = "hidden";
        		helpmenu(0);
        	});
        	document.getElementById("go_menu").addEventListener('click', function() {
        		document.getElementById("popup_menu").style.width = "240px";
        		document.getElementById("popup_menu").style.height = "250px";
        		
        		setTimeout("document.getElementById('close_menu').style.visibility = 'visible'",290);
        		document.getElementById("popup_menu").style.visibility = "visible";
        		helpmenu(1);
        	});
        	document.getElementById("go_favorite").addEventListener('click', function() {
        		document.getElementById("popup_menu").style.width = "240px";
        		document.getElementById("popup_menu").style.height = "250px";
        		
        		setTimeout("document.getElementById('close_menu').style.visibility = 'visible'",290);
        		document.getElementById("popup_menu").style.visibility = "visible";
        		helpmenu(2);
        	});
        	document.getElementById("go_setting").addEventListener('click', function() {
        		document.getElementById("popup_menu").style.width = "240px";
        		document.getElementById("popup_menu").style.height = "250px";
        		
        		setTimeout("document.getElementById('close_menu').style.visibility = 'visible'",290);
        		document.getElementById("popup_menu").style.visibility = "visible";
        		helpmenu(3);
        	});
        	
        }

        if (!overlay) {
        	
            overlay = document.createElement("div");
            overlay.id = "overlay";

            //big = document.createElement("img");
            //big.id = "big";
            big = document.getElementById("big");
            overlay.appendChild(big);

            desc = document.createElement("div");
            desc.id = "description";
            desc.innerHTML = "sample description";
            overlay.appendChild(desc);

            arrowLeft = document.createElement("div");
            arrowLeft.className = "arrow-left";
            overlay.appendChild(arrowLeft);

            arrowRight = document.createElement("div");
            arrowRight.className = "arrow-right";
            overlay.appendChild(arrowRight);

            like = document.createElement("div");
            like.id = "like";
            overlay.appendChild(like);

            parent.appendChild(overlay);

            arrowRight.addEventListener('click', function() {
                Grid.right();
            });

            arrowLeft.addEventListener('click', function() {
                Grid.left();
            });
        }
    }

    function up() {
    	if(panel_index==1){
    		if(index==0){
    			
    				alert('len6');
    				panel_index = 0;
    				indexgl=null;
    				focus(-999);
    				
    		         	document.getElementById("list_focus").className = "setfocus";
    		         
    			
    		}
    		else if(index==6){
    			document.getElementById("gallery-arrows-left").click();
    		}
    		else
    			move(-rowSize);
    	}
    	else if(panel_index==2){
    		alert("len len nao");
    	}
    }

    function down() {
    	if(panel_index==1){
    		if(index==4 || index==5){
    			document.getElementById("gallery-arrows-left").click();
    		}
    		else
    			move(rowSize);
    	}
    	else if(panel_index==2){
    		alert("xuong xuong nao");
    	}
    	else{
    		panel_index=1;
    		indexgl=0;
    	focus();
    	
    	document.getElementById("list_focus").className = "";
         
    	}
    }

    function left() {
    	if(panel_index==0){
    		list_to_left();
    	}
    	else if(panel_index==2){
    		alert("wa trai nao");
    	}
    	else if(panel_index==4){
    		
	            //updateBig();
    		
	        		open_nguyenlieu();
	        	
	            updateDesc();
	            alert("mo nguyen lieu "+ index);
	            
	            document.getElementById("manhinh1").className = "manhinh1quatrai2";
    	}
    	else{
    		if(index==6){
    			document.getElementById("gallery-arrows-left").click();
    		}
    		else{
    			move(-1);
    	        
    		}
	        
    	}
    }

    function right() {
    	if(panel_index==0){
    		list_to_right();
    	}
    	else if(panel_index==2){
    		alert("wa fai nao");
    	}
    	else if(panel_index == 4){
    		
	            //updateBig();
    		
	        		open_cachlam();
	        	
	            updateDesc();
	            alert("mo cach lam "+ index);
	            document.getElementById("manhinh2").className = "manhinh2quatrai2";
	            
    	}
    	else{
    		if(index == index_max-1){
    			document.getElementById("gallery-arrows-right").click();
    		}else{
    			move(1);
    	        
    		}
	        
    	}
    }
    

    function getItem() {
        return items[index < 0 ? 0 : (index < items.length ? index : items.length - 1)].src.split("/").pop() || null;
    }

    function updateArrows() {
        //arrowLeft.style.display = index_manhinh_huongdan == 1 ? "block" : "none";
        //arrowRight.style.display = index_manhinh_huongdan == 0 ? "block" : "none";
        if(index_manhinh_huongdan == 0){
        	arrowLeft.style.visibility = "hidden";
        	arrowRight.style.visibility = "visible";
        }
        else{
        	arrowLeft.style.visibility = "visible";
        	arrowRight.style.visibility = "hidden";
        }
    }
    function open_nguyenlieu(){
    	var domain = "http://ngoton.com/samsung_app/images/";
    	index_manhinh_huongdan = 0;
   	 zoom(1);
        rotatePhoto(0);

        log("index: " + index);
        
        document.getElementById("manhinh2").style.visibility = "hidden";
        document.getElementById("manhinh1").style.visibility = "visible";
        document.getElementById("manhinh1").className = "manhinh1quaphai1";
        document.getElementById("text_huongdan1").innerHTML = "<img hspace='5px' align='left' width='165px' height='110px' src='"+ domain + folder_img + "image_0" +(index+1) +".jpg' />"+hien_thi_nguyen_lieu[index];
        //document.getElementById("image_huongdan1").innerHTML = "<img width='180px' height='115px' src='"+ domain + folder_img + "image_0" + (index+1) +".jpg' />";
        alert("<img src='"+ domain + folder_img + "image_0" + (index+1) +".jpg' />");
        document.getElementById("spribon").innerHTML = hien_thi[index] ;
        document.getElementById("spcooking").innerHTML = "NGUYÊN LIỆU" ;
        updateArrows();
        updateLike();
        updatePosition(PHOTO_W, PHOTO_H);

        if (typeof callbacks.onPhotoChanged === "function") {
            callbacks.onPhotoChanged();
        }
        
   }

    function open_cachlam(){
    	var domain = "http://ngoton.com/samsung_app/images/";
    	index_manhinh_huongdan = 1;
    	 zoom(1);
         rotatePhoto(0);

         log("index: " + index);
         
         document.getElementById("manhinh1").style.visibility = "hidden";
         document.getElementById("manhinh2").style.visibility = "visible";
         document.getElementById("manhinh2").className = "manhinh2quaphai1";
         document.getElementById("text_huongdan2").innerHTML = "<img hspace='5px' align='left' width='165px' height='110px' src='"+ domain + folder_img + "image_0" +(index+1) +".jpg' />"+hien_thi_cach_lam[index];
         //document.getElementById("image_huongdan2").innerHTML = "<img width='180px' height='115px' src='"+ domain + folder_img + "image_0" +(index+1) +".jpg' />";
         alert("<img src='"+ domain + folder_img + "image_0" + (index+1) +".jpg' />");
         document.getElementById("spribon").innerHTML = hien_thi[index] ;
         document.getElementById("spcooking").innerHTML = "CÁCH LÀM" ;
         updateArrows();
         updateLike();
         updatePosition(PHOTO_W, PHOTO_H);

         if (typeof callbacks.onPhotoChanged === "function") {
             callbacks.onPhotoChanged();
         }
         
    }
    function updateBig() {
        zoom(1);
        rotatePhoto(0);

        log("index: " + index);
        big.src = "images/big/" + getItem();
        log("viewing: " + big.src);
        updateArrows();
        updateLike();
        updatePosition(PHOTO_W, PHOTO_H);

        if (typeof callbacks.onPhotoChanged === "function") {
            callbacks.onPhotoChanged();
        }
    }

    function updateDesc() {
        var text = descriptions[index];
        if (text) {
            desc.style.display = "block";
            desc.innerHTML = text;
        } else {
            desc.style.display = "none";
            desc.innerHTML = "";
        }
    }

    function setDescription(text) {
        descriptions[index] = text;
        updateDesc();
    }

    function open() {
    	if(panel_index==0){
    		panel_index=1;
    		indexgl=0;
    		focus();
    		
    		document.getElementById("list_focus").className = "";
             
    	}else{
	        if (typeof callbacks.onPhotoOpened === "function") {
	            callbacks.onPhotoOpened();
	        }
	        //updateBig();
	        
	        open_nguyenlieu();
	        updateDesc();
	        overlay.style.display = "block";
	        opened = true;
	        panel_index = 4;
    	}
    	alert("panel dang o:"+ panel_index);
    }

    function close() {
        overlay.style.display = "none";
        big.src = "";
        opened = false;
        zoom(1);
        rotatePhoto(0);
        panel_index = 1;
        alert("panel dang o:"+ panel_index);
    }

    function updatePosition(width, height) {
        log("updatePosition, width: " + width + ", height: " + height);

        var top = (SCREEN_H - height) / 2;
        var left = (SCREEN_W - width) / 2;

        big.style.top = top + "px";
        big.style.left = left + "px";
    }

    /**
     * Zooms in/out opened photo.
     * @param {Number} ratio Zoom ration as a fraction, example: 1, 0.5, 1.2
     */
    function zoom(ratio) {
        log("zoom ratio: " + ratio);
        var zoomWidth = Math.floor(ratio * PHOTO_W);
        var zoomHeight = Math.floor(ratio * PHOTO_H);
        big.style.width = zoomWidth + "px";
        big.style.height = zoomHeight + "px";
        updatePosition(zoomWidth, zoomHeight);
    }

    function highlightLike() {
        log("Highlight like");
        big.style.border = "5px solid red";
        document.getElementById("like").style.display = "block";
    }

    function removeHighlightLike() {
        log("Remove like highlight");
        big.style.border = "1px solid #777";
        document.getElementById("like").style.display = "none";
    }

    function updateLike() {
        if (likeState[index] === true) {
            highlightLike();
        } else {
            removeHighlightLike();
        }
    }

    function likePhoto() {
        if (likeState[index] === false) {
            likeState[index] = true;
            highlightLike();
            addfavorite(loaimonan[index],hien_thi[index]);
        }
    }

    /**
     * Rotates opened photo.
     * @param angle Rotation angle in degrees, positive values rotate clockwise
     */
    function rotatePhoto(angle) {
        log("rotatePhoto angle: " + angle);
        document.getElementById("big").style["-webkit-transform"] = "rotate(" + angle + "deg)";
    }

    function getfolder(folder){
    	folder_img = folder;
    }
    
    
    // public interface
    return {
    	
    	hienthiketnoi: hienthiketnoi,
    	checkConnection: checkConnection,
    	showmota: showmota,
    	getfolder: getfolder,
    	getloaimon: getloaimon,
    	addfavorite: addfavorite,
    	favorite: favorite,
    	open_nguyenlieu: open_nguyenlieu,
    	open_cachlam: open_cachlam,
    	shownguyenlieu: shownguyenlieu,
    	showcachlam: showcachlam,
    	loadcontentmenu: loadcontentmenu,
    	helpmenu: helpmenu,
    	showinfo: showinfo,
    	setindex: setindex,
    	list_to_left: list_to_left,
    	list_to_right: list_to_right,
    	list: list,
    	load: load,
        init : init,
        callbacks: callbacks,
        setDescription : setDescription,
        focus : focus,
        left : left,
        right : right,
        up : up,
        down : down,
        move : move,
        getItem : getItem,
        open : open,
        close : close,
        zoom : zoom,
        likePhoto : likePhoto,
        updateClick : updateClick,
        rotation : rotatePhoto
        
    };
}());
